<template>
  <div>
    <!-- 添加回退按钮： -->
    <TopNav title="个人中心" />
    <!-- 上半部分： -->
    <div class="profile" @click="$router.push('/proedit')">
      <!-- 用户头像 -->
      <!-- 在dom中，$axios不需要加“this” ，js中需要加this-->
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL + userInfo.head_img"
        alt=""
        class="userpic"
      />
      <img v-else src="../../assets/logo1.jpg" alt="" class="userpic" />
      <!-- 昵称/名字、生日 -->
      <div class="info">
        <div class="name">
          <span
            class="iconfont"
            :class="{
              iconxingbienan: userInfo.gender === 1,
              iconxingbienv: userInfo.gender === 0,
            }"
          ></span>
          {{ userInfo.nickname || userInfo.username }}
        </div>
        <div class="date">2012-12.12</div>
      </div>
      <!-- 指示箭头： -->
      <span class="iconfont iconjiantou1"></span>
    </div>
    <!-- 下半部分： -->
    <ProfileBar
      event="我的关注"
      details="关注的用户"
      @click.native="$router.push('/follow')"
    />
    <!-- 卡槽：可以在父页面显示组件内部添加的文字 -->
    <!-- <ProfileBar event="我的跟帖" details="跟帖/回复">12334</ProfileBar> -->
    <ProfileBar
      event="我的跟帖"
      details="跟帖/回复"
      @click.native="$router.push('/mycomment')"
    />
    <ProfileBar
      event="我的收藏"
      details="文章/视频"
      @click.native="$router.push('/profilestar')"
    />
    <!-- 子组件监听原生，需要在click之后添加 点·native -->
    <ProfileBar event="设置" @click.native="$router.push('/proedit')" />
    <ProfileBar event="退出" @click.native="logout" />
  </div>
</template>

<script>
import TopNav from "../../components/TopNav";
import ProfileBar from "../../components/ProfileBar";
export default {
  components: {
    ProfileBar,
    TopNav,
  },
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    // 页面创建完毕，开始获取数据
    console.log(this.$axios.defaults.baseURL);
    this.$axios({
      // 要加斜杠啊啊啊！！！
      // url: "http://157.122.54.189:9083/user" + localStorage.getItem("userId"),

      url: "/user/" + localStorage.getItem("userId"),
    }).then((res) => {
      console.log(res.data);
      const { message, data } = res.data;
      if (message == "获取成功") {
        this.userInfo = data;
      }
      // else {
      //   // 用户获取信息失败：
      //   this.$toast.fail(message);
      //   // 知道用户信息时错的，就需要把信息给他清除掉，并且跳转到登录页：
      //   // 这样可以防止用户直接胡乱输入一个伪造的token与userId值，从而进入登陆页面
      //   localStorage.removeItem("token");
      //   localStorage.removeItem("userId");
      //   this.$router.replace("/login");
      // }
      // 如果用户名或密码为空：则强制跳转到登录页：
      if (this.userInfo.username == "" || this.userInfo.password == "") {
        this.$router.replace("/login");
        this.$toast("用户名与密码不能为空哦~~请重新登录");
      }
    });
  },
  methods: {
    lognext(str) {
      console.log(str);
    },
    logout() {
      // 退出个人中心
      localStorage.removeItem("token");
      localStorage.removeItem("userId");
      this.$toast("退出成功");
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="less" scoped>
// 如果父组件需要穿透子组件修改它的样式时，需要添加/deep/
// /deep/.event {
//   background-color: #f63bc0;
//   display: none;
// }
.profile {
  display: flex;
  align-items: center;
  //   height: 130 / 360 * 100vw;
  padding: 24 / 360 * 100vw;
  border-bottom: 5 / 360 * 100vw solid#e4e4e4;
  .userpic {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    padding-left: 10 / 360 * 100vw;
    .name {
      font-size: 16 / 360 * 100vw;
      color: #373737;
      .iconxingbienan {
        color: #87c1ec;
      }
      .iconxingbienv {
        color: #f63bc0;
      }
    }
    .date {
      margin-top: 6 / 360 * 100vw;
      font-size: 14 / 360 * 100vw;
      color: #a9a9a9;
    }
  }
  .iconjiantou1 {
    color: #a9a9a9;
  }
}
</style>